<template>
	<view class="sku-container df-ac" v-if="show">
		<view class="mask" v-if="show" @click="close"></view>
		<view class="sku">
			<view class="num-add" style="position: relative;height: 100px;">
				<input type="text" v-model="commentConent" class="input" style="height: 100px;width: 100%;" placeholder="请输入评论内容">
			</view>
			<view class="btn-add-car" @click="sendComment()">发表评论</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			good:{
				type:Object
			},
			show:{
				type:Boolean,
				default:false
			},
			comment_id:{
				type:Number,
				default:0
			},
			reply_comment_id:{
				type:Number,
				default:0
			}
		},
		watch: {
			show(nv,ov) {
				this.isShow = nv
				
			}
		},
		data() {
			return {
				check:false,
				commentConent:"",
				isShow:false,
				reply_comment_id:""
			};
		},
		methods:{
			close() {
				this.isShow = false
				this.$emit('close')
			},
			/*
			        $post['content'] = element('message',$input);//关注状态
			        $post['comment_id'] = element('commentId',$input);//帖子ID
			        $post['reply_comment_id'] = element('reply_comment_id',$input);//回复者ID
			*/
		   //评论
		   sendComment(){
		   	var reply_comment_id = this.reply_comment_id;
		   	
		   	var query = {
		   		comment_id:this.comment_id,
		   		content:this.commentConent,
				reply_comment_id:reply_comment_id,
		   	}
		   	this.$api.communitySendComment(query).then(res=> {
		   			 console.log("发表评论")
		   				console.log(res)
		   				if(res.code == 0){
							this.commentConent = "";
		   				}
		   				this.close();
		   	}).catch(err=> { console.log(err) }
		   	);
		   },
		}
	}
</script>

<style lang="scss">
.sku-container {
	.mask {
		background-color: rgba(0,0,0,.4);
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
	}
	.sku {
		padding: 40rpx;
		border-radius: 10rpx 10rpx 0 0;
		position: fixed;
		width: 100vw;
		z-index: 1100;
		background-color: #fff;
		bottom: 0;
		.tag-carriage {
			padding: 10rpx;
			background-color: rgba(87,59,209,.1);
			color: #573BD1;
		}
		.type-item {
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			color: #727C8E;
			background-color: #F5F5F5;
			border-radius: 7rpx;
			font-size: 22rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			&:nth-child(4n) {
				margin-right: 0;
			}
			&.active {
				background-color: rgba(254,86,52,0.1);
				border: 1px solid rgba(254,86,52,1);
				color: #FE5634;
				
			}
		}
		.btn-add-car {
			background: linear-gradient(225deg, #e5e5e5, #e5e5e5);
			border-radius: 7rpx;
			box-shadow: 0px 2px 9px -2px #f8f8f8;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #000000;
			font-size: 30rpx;
			border: solid 1px #bbbbbb;
		
			
		}
	}
}
</style>
